import React, { useRef, useEffect } from 'react';

/**
 * 渲染计数钩子，用于调试和监控组件的重渲染情况
 * 
 * @param componentName 组件名称，用于日志标识
 * @param enableLogging 是否启用日志，默认为false
 * @returns 当前渲染次数
 */
export function useRenderCount(componentName: string, enableLogging = false): number {
  // 使用ref来存储渲染次数，避免引起额外的渲染
  const renderCount = useRef<number>(0);
  
  // 在每次组件渲染时递增计数
  renderCount.current += 1;
  
  // 在开发环境下输出日志
  useEffect(() => {
    if (enableLogging && process.env.NODE_ENV === 'development') {
      console.log(`[性能监控] ${componentName} 已重渲染 ${renderCount.current} 次`);
    }
  });
  
  return renderCount.current;
}

/**
 * 组件渲染性能监控高阶组件
 * 
 * @param WrappedComponent 被包装的组件
 * @param componentName 组件名称，默认使用WrappedComponent.displayName
 * @returns 包装后的组件
 */
export function withRenderMonitor<P extends object>(
  WrappedComponent: React.ComponentType<P>,
  componentName?: string
): React.FC<P> {
  const displayName = componentName || WrappedComponent.displayName || WrappedComponent.name || 'Component';
  
  const MonitoredComponent: React.FC<P> = (props) => {
    const renderCount = useRenderCount(displayName, true);
    
    // 输出性能警告
    if (renderCount > 5) {
      console.warn(`[性能警告] ${displayName} 渲染次数过多: ${renderCount}次. 请检查依赖项和记忆化.`);
    }
    
    return React.createElement(WrappedComponent, props);
  };
  
  MonitoredComponent.displayName = `RenderMonitor(${displayName})`;
  
  return MonitoredComponent;
}

export default useRenderCount; 